<template>    <!-- 首页轮播 -->
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item,i) in carouselItems" :key="i" @click="onDetail(item.product_id)">
            <van-image :src="APIDomainName + item.img" />
        </van-swipe-item>
    </van-swipe>
</template>
 
<script>
    export default {
        name: 'homeSwipe',
        props: {  //用props接收父组件传递的参数
            carouselItems: Array,
        },
 
        methods: {
            onDetail(id) {
                this.$router.push(`/product/detail/${id}`);
            }
        }
    }
</script>
<style scoped>
.van-swipe {
    width: 100%;
    /* 可以根据需要设置合适的高度，如 30vh 表示视口高度的 30% */
    height: 30vh; 
}

.van-swipe-item {
    width: 100%;
    height: 100%;
}

.van-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并覆盖整个容器 */
}
</style>